<template>
  <div>
    <el-table :data="tableData" max-height="250">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="expertName" label="专家" width="150">
        <template #default="scope">
          <el-input
            placeholder="请输入"
            v-if="scope.$index == tableData.length - 1 && !title.includes('详情')"
            :disabled="title.includes('详情')"
            v-model="scope.row.expertName"
          ></el-input>
          <span v-else>{{ scope.row.expertName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="expertType" label="专家类型" width="150">
        <template #default="scope">
          <el-select v-if="scope.$index == tableData.length - 1 && !title.includes('详情')" :disabled="title.includes('详情')" v-model="scope.row.expertType">
            <el-option
              v-for="item in expertTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span v-else>{{ scope.row.expertType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="specialty" label="专业类别" width="150">
        <template #default="scope">
          <el-input
            placeholder="请输入"
            v-if="scope.$index == tableData.length - 1 && !title.includes('详情')"
            :disabled="title.includes('详情')"
            v-model="scope.row.specialty"
          ></el-input>
          <span v-else>{{ scope.row.specialty }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="workUnitName" label="单位名称" width="150">
        <template #default="scope">
          <el-input
            placeholder="请输入"
            v-if="scope.$index == tableData.length - 1 && !title.includes('详情')"
            :disabled="title.includes('详情')"
            v-model="scope.row.workUnitName"
          ></el-input>
          <span v-else>{{ scope.row.workUnitName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="positionName" label="职称" width="150">
        <template #default="scope">
          <el-input
            placeholder="请输入"
            v-if="scope.$index == tableData.length - 1 && !title.includes('详情')"
            :disabled="title.includes('详情')"
            v-model="scope.row.positionName"
          ></el-input>
          <span v-else>{{ scope.row.positionName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="pass" label="是否通过" width="150">
        <template #default="scope">
          <el-select v-if="scope.$index == tableData.length - 1 && !title.includes('详情')" :disabled="title.includes('详情')" v-model="scope.row.pass">
            <el-option
              v-for="item in passList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span v-else>{{ scope.row.pass }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="opinion" label="评审意见" width="150">
        <template #default="scope">
          <el-input
            placeholder="请输入"
            v-if="scope.$index == tableData.length - 1 && !title.includes('详情')"
            :disabled="title.includes('详情')"
            v-model="scope.row.opinion"
          ></el-input>
          <span v-else>{{ scope.row.opinion }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" v-if="!title.includes('详情')" width="180">
        <template #default="scope">
          <el-button
            type="danger"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
          >
            删除
          </el-button>
          <el-button
            type="primary"
            v-if="scope.$index == tableData.length - 1"
            size="small"
            @click.prevent="addRow(scope.row)"
          >
            添加
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: '',
    },
    initData: {
      type: Array,
      default: [] as any,
    },
  },
  setup (props) {
    const expertTypeList = [
      {
        value: '内部专家',
        label: '内部专家',
      },
      {
        value: '外部专家',
        label: '外部专家',
      }
    ]
    const passList = [
      {
        value: '通过',
        label: '通过',
      },
      {
        value: '不通过',
        label: '不通过',
      }
    ]
    const tableData =props.title.includes('详情')?ref([]):ref([
      {
        expertName: '',
        expertType: '',
        specialty: '',
        workUnitName: '',
        positionName: '',
        opinion: '',
        pass: '',
      },
    ])
    tableData.value = [...props.initData as any,...tableData.value]
    const deleteRow = (index: number) => {
      tableData.value.splice(index, 1)
    }
    const addRow = (row) => {
      console.log(row,'addRow');
      for (let key in row) {
        if (row[key] == '') {
          ElMessage({
            message: '请填写完整信息',
            type: 'warning',
          })
          return
        }
      }
      tableData.value.push({
        expertName: '',
        expertType: '',
        specialty: '',
        workUnitName: '',
        positionName: '',
        opinion: '',
        pass: '',
      })
    }

    const getOpinionList = ()=>{
      return tableData.value
    }
    const verifyOpinionList = ()=>{
      let flag  =  tableData.value.every(row=>{
        for (let key in row) {
          if (row[key] == '') {
            ElMessage({
              message: '请填写完整的专家意见',
              type: 'warning',
            })
            return false
          }else{
            return true
          }
        }
      })
      return flag
    }
    return {
      expertTypeList,
      passList,
      tableData,
      deleteRow,
      addRow,
      getOpinionList,
      verifyOpinionList
    }
  }
})
</script>

<style scoped>

</style>